<!-- 我的 -->
<template>
	<view>
		<view class="UCenter-bg">
		  <!-- <image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image> -->
		  <u-avatar :src="userInformation&&userInformation.employee&&userInformation.employee.photo?imageUrl(userInformation.employee.photo):''" mode="aspectFill" class="animation-slide-right" shape="circle" :size="100" style="border-radius: 20rpx;" :style="[{animationDelay: '0.1s'}]"></u-avatar>
		  <image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="aspectFill" class="gif-wave"></image>
		</view>
		<!-- 个人信息展示 -->
		<!-- @click="onInformation" -->
		<!-- <view class="person-info animation-slide-right" :style="[{animationDelay: '0.1s'}]">
			<view class="inforamtion">
				<view class="avatar-name-position">
					<view class="avatar">
						<u-avatar :src="userInformation.employee.photo?imageUrl(userInformation.employee.photo):''" shape="square" :size="80" style="border-radius: 20rpx;"></u-avatar>
					</view>
					<view class="name-position">
						<view class="name">{{userInformation.realname}}</view>
						<view class="position">{{userInformation.orgCodeTxt}}</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="padding flex text-center text-grey bg-white shadow-warp">
		  <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		    <view class="text-xl text-orange">{{userInformation.realname}}</view>
					  <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
		  </view>
		  
		  <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		    <view class="text-xl text-green">{{userInformation.orgCodeTxt}}</view>
		    <view class="margin-top-sm"><text class="cuIcon-news"></text> 部门</view>
		  </view>
		</view>
		
		<!-- tabs展示 -->
		<view class="tab">
			<u-cell-group :border="false">
				<!-- <u-cell @click="onSwitchRoles" icon="share" title="角色切换" :arrow="false"titleStyle="color: #1A1A1A;font-size: 29rpx;" rightIconStyle="color: #1A1A1A;font-weight:600">
					<view class="" slot="icon"><image style="width: 32rpx;height: 32rpx;" src="../../static/mine/qiehuan.png"></image></view>
				</u-cell> -->
				<!-- <u-cell @click="onAboutUs" icon="share" title="关于我们" :arrow="false"titleStyle="color: #1A1A1A;font-size: 29rpx;" rightIconStyle="color: #1A1A1A;font-weight:600">
					<view class="" slot="icon"><image style="width: 32rpx;height: 32rpx;" src="../../static/mine/guanyu.png"></image></view>
				</u-cell>
				<u-cell @click="onPrivacyPolicy" icon="share" title="隐私政策" :arrow="false"titleStyle="color: #1A1A1A;font-size: 29rpx;" rightIconStyle="color: #1A1A1A;font-weight:600">
					<view class="" slot="icon"><image style="width: 32rpx;height: 32rpx;" src="../../static/mine/yinsi.png"></image></view>
				</u-cell> -->
				<u-cell
					class="animation-slide-bottom cardOne"
					:style="[{animationDelay: '0.1s'}]"
					size="large" 
					@click="showDepartment=true"
					title="切换部门" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<u-cell 
					@click="onChangePassword"
					size="large" 
					rightIcon="arrow-right"
					title="修改密码" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.2s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<!-- #ifdef APP-PLUS || APP -->
				<u-cell 
					@click="clearCache" 
					size="large" 
					title="清除缓存" 
					:value="fileSizeString" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.3s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				
				<u-cell 
					size="large" 
					@click="onUpdate" 
					title="检查版本更新" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.4s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<!-- #endif -->
				<u-cell
					size="large" 
					@click="onAboutUs" 
					title="关于我们" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.4s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<u-cell 
					size="large" 
					@click="onPrivacyPolicy" 
					title="隐私政策" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.4s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<u-cell
					size="large" 
					@click="onAgreement" 
					title="用户服务协议" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom card"
					:style="[{animationDelay: '0.4s'}]"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
				<u-cell 
					size="large" 
					@click="goCancel" 
					title="账号注销" 
					:arrow="false"
					titleStyle="color: #8799a3;font-size: 16px;" 
					rightIconStyle="color: #C9C4CA;"
					class="animation-slide-bottom cardLast"
					:style="[{animationDelay: '0.5s'}]"
					:border="false"
				>
					<u-icon name="arrow-right" slot="right-icon" color="#C6C6C6"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		
		<!-- 退出登录 -->
		<view class="animation-slide-top" style="margin: 0 auto;" :style="[{animationDelay: '0.2s'}]">
			<view class="btn" @click="isShowModal = true">
				退出登录
			</view>
		</view>
		
		<!-- 角色切换picker -->
		<!-- <u-picker :show="showPicker" :columns="columnsPicker" keyName="label" title="角色切换" @confirm="confirmPicker"></u-picker> -->
		<tabbar :value="3" ></tabbar>
		<!-- 部门弹窗选择 -->
		<departmentChoice :show="showDepartment" @click="onChoice" @close="onClose"  @choice="onNavgat"></departmentChoice>
		<u-toast ref="uToast"></u-toast>
		<u-modal
			:show="isShowModal"
			showCancelButton
			confirmText="确定"
			cancelText="取消"
			confirmColor="rgb(30, 111, 255)"
			cancelColor="#000000"
			@confirm="handleConfirm"
			@cancel="isShowModal = false"
		>
			<view class="slot-content">
				<view class="modal_content">你确定退出？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
 		mapActions ,
	} from 'vuex';
	import tabbar from '@/components/tabbar.vue'
	import departmentChoice from '@/components/departmentChoice.vue'
	import {imageUrl} from '@/utils/common.js'
	import { logout } from '@/api/index.js'
	// #ifdef APP-PLUS
	import APPUpdate, { getCurrentNo } from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
	// #endif
	import { loginOut } from '@/api/index.js'
	export default {
		components: {
			tabbar,
			departmentChoice
		},
		data() {
			return {
				version: '', //版本号
				imageUrl,
				fileSizeString: "", // 缓存总数
				showDepartment: false,
				userInformation: '', // 用户信息
				showPicker: false, // piceker 弹窗
				columnsPicker: [
					[{
						label: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				isShowModal: false
			}
		},
		onLoad() {
			uni.hideTabBar()
			// 获取用户信息
			this.userInformation = this.userInfo()
			this.formatSize() // 计算缓存
			// #ifdef APP-PLUS
			getCurrentNo(res => {
				// 进页面获取当前APP版本号（用于页面显示）
				this.version = res.version;
			});
			// #endif
		},
		methods: {
			// 用户信息
			...mapState(['userInfo']),
			...mapActions(['setUserInfo']),
			
			// 计算缓存
			formatSize() {
				let that = this;
				// #ifdef APP || APP-PLUS
				plus.cache.calculate(function(size) {
					let sizeCache = parseInt(size);
					if (sizeCache == 0) {
						that.fileSizeString = "0B";
					} else if (sizeCache < 1024) {
						that.fileSizeString = sizeCache + "B";
					} else if (sizeCache < 1048576) {
						that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
					} else if (sizeCache < 1073741824) {
						that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
					} else {
						that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
					}
				});
				// #endif
			},
			handleConfirm(){
				uni.$u.debounce(this.confirm, 500)
			},
			// 点击确定退出登录
			confirm(){
				this.isShowModal = false
				loginOut().finally(() => {
					uni.removeStorageSync('userInfo')
					uni.removeStorageSync('ACCESS_TOKEN')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				})
			},
			// 清理缓存
			clearCache() {
				let that = this;
				uni.showModal({
					title: '是否清除缓存？',
					success: (res) => {
						if (res.confirm) {
							let os = plus.os.name;
							if (os == 'Android') {
								let main = plus.android.runtimeMainActivity();
								let sdRoot = main.getCacheDir();
								let files = plus.android.invoke(sdRoot, "listFiles");
								let len = files.length;
								for (let i = 0; i < len; i++) {
									let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径 
									plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
										if (entry.isDirectory) {
											entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录 
												uni.showToast({
													title: '缓存清理完成',
													duration: 2000
												});
												that.formatSize(); // 重新计算缓存 
											}, function(e) {
												console.log(e.message)
											});
										} else {
											entry.remove();
										}
									}, function(e) {
										// 文件路径读取失败
									});
								}
							} else { // ios 
								plus.cache.clear(function() {
									that.$refs.uToast.show({
										message: '缓存清理完成',
										type: 'success'
									})
									that.formatSize();
								});
							}
						}
					}
				})
			},
			
			// 点击角色切换
			onSwitchRoles () {
				this.showPicker = true
			},
			
			// 选择器点击确定
			confirmPicker (item) {
				this.showPicker = false
			},
			
			// 点击跳转个人信息
			onInformation () {
				uni.navigateTo({
					url: '/pages/mine/personalInformation'
				})
			},
			
			// 点击修改密码
			onChangePassword () {
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				})
			},
			
			// 点击退出登录
			// onReturnLogin () {
			// 	uni.removeStorageSync('userInfo')
			// 	uni.removeStorageSync('ACCESS_TOKEN')
			// 	uni.reLaunch({
			// 		url: '/pages/login/login'
			// 	})
			// },
			
			// 点击关于我们
			onAboutUs () {
				uni.navigateTo({
					url: '/pages/mine/aboutUs'
				})
			},
			
			// 点击隐私政策
			onPrivacyPolicy () {
				uni.navigateTo({
					url: '/pages/mine/privacyPolicy'
				})
			},
			// 用户协议
			onAgreement () {
				uni.navigateTo({
					url: '/pages/mine/userAgreement'
				})
			},
			
			// 账号注销
			goCancel () {
				let that = this
				uni.showModal({
					title: '注销账号',
					content: '确定注销此账号？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							
							uni.showToast({
								title:"已申请注销,请等待管理员审核",
								icon: "none"
							})
						} else {
							//点击取消之后执行的代码
						}
					}
				})
			},
			
			// 选择了部门
			onChoice (item) {
				this.showDepartment = false
				var that = this
				uni.setStorageSync('userInfo', item);
				this.setUserInfo(item);
				this.userInformation = this.userInfo()
				this.$refs.uToast.show({
					message: '切换部门成功',
					type: 'success'
				})
				
			},
			onNavgat () {
				this.showDepartment = false
				var that = this
				this.$refs.uToast.show({
					message: '暂无部门可选',
					type: 'error'
				})
			},
			// 点击部门取消
			onClose () {
				this.showDepartment = false
			},
			
			// 检查版本更新
			onUpdate () {
				// 检查APP是否有新版本
				// true 没有新版本的时候有提示，默认：false
				APPUpdate(true);
			}
		}
	}
</script>

<style lang="scss" scoped>
.UCenter-bg {
	/* #ifdef MP-WEIXIN */
	background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
	/* #endif */
	/* #ifndef MP-WEIXIN */
	background-image: url('/static/blue.png');
	/* #endif */
  background-size: cover;
  height: 400rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}
	
	
.modal_content{
	padding: 20rpx 0;
}
// 个人信息展示
.person-info{
	width: 750rpx;
	height: 240rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.inforamtion{
		margin-left: 20rpx;
		// margin-top: 140rpx;
		.avatar-name-position{
			display: flex;
			align-items: center;
			.avatar{
				
			}
			.name-position{
				margin-left: 18rpx;
				.name{
					font-size: 18px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8799a3;
					margin-bottom: 8rpx;
					width: 534rpx;
					overflow: hidden; /*超出隐藏*/
					text-overflow: ellipsis;/*隐藏后添加省略号*/
					white-space: nowrap;/*强制不换行*/
				}
				.position{
					width: 534rpx;
					font-size: 14px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #7F7F7F;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;       /* 必需 */
				}
			}
		}
	}
	.scan{
		margin-right: 35rpx;
		margin-top: 140rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}

// tab
.tab {
	margin: 50rpx 20rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
}

// 退出登录
.btn {
	margin: 0 auto;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8799a3;
	border: none;
	width: 700rpx;
	height: 50px;
	background-color: #FFFFFF;
	text-align: center;
	border-radius: 10rpx;
	line-height: 50px;
}
.btn:active {
  box-shadow: 0 8px 50px #23232333;
  border-radius: 10rpx;
}
.card:active {
 box-shadow: 0 8px 50px #23232333;
}
.cardOne:active {
 box-shadow: 0 8px 50px #23232333;
 border-radius: 20rpx 20rpx 0 0;
}
.cardLast:active {
 box-shadow: 0 8px 50px #23232333;
 border-radius: 0rpx 0rpx 20rpx 20rpx;
}
</style>
